 

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" type="text/css" href="../css/detail.css">
        <link rel="stylesheet" type="text/css" href="../css/index.css">
        <link rel="stylesheet" type="text/css" href="../font/iconfont.css"/>

    <style type="text/css">
        .active {
        display: inline-block;
    }
    .active img {
        border: 2px solid;
    }
    </style>
</head>
<body>
     <script src="/lib/requirejs/require.js" data-main="/js/detail"></script>
   <!-- 头部布局 -->
    <header></header>
    <div class="f_nav">
        <ul>
            <li><a href="#"><span>Z18</span></li>
             <li><a href="#"><span>红魔电竞游戏手机</span></li>
                <li><a href="#"><span>Z18mini</span></li>
             <li><a href="#"><span>V18 全面屏</span></li>
                <li><a href="#"><span>Z17 全面屏</span></li>
             <li><a href="#"><span>Z17 舰旗版</span></li>
                 <li><a href="#"><span>nubia N3</span></li>
             <li><a href="#"><span>Z17minis 小牛8</span></li>
        </ul>
    </div>


<!-- 详情模板 -->

   

    <div class="det_banner">
        <div class="det_banner_header">
            <ul>
                <li class="ii"><a href="#">商品详情</a></li>
                <li><a href="#">规格参数</a></li>
            </ul>
          </div>
        <div>
            <img style="max-width: 100%;vertical-align: middle;" src="../img/5ab21dbb49fe136.jpg">
        </div>
         <div>
            <img style="max-width: 100%;vertical-align: middle;" src="../img/5ab888982914566.jpg">
        </div>
         <div>
            <img style="max-width: 100%;vertical-align: middle;" src="../img/5ab21dba9776d42.jpg">
        </div>
         <div>
            <img style="max-width: 100%;vertical-align: middle;" src="../img/5ab888982914566.jpg">
        </div>
         <div>
            <img style="max-width: 100%;vertical-align: middle;" src="../img/5ab21dbb8c79f74.jpg">
        </div>
         <div>
            <img style="max-width: 100%;vertical-align: middle;" src="../img/5ab21dbd97c3616.jpg">
        </div>
         <div>
            <img style="max-width: 100%;vertical-align: middle;" src="../img/5ab21dbb8c79f74.jpg">
        </div>
        <div>
            <img style="max-width: 100%;vertical-align: middle;" src="../img/5ab21dba9776d42.jpg">
        </div>
        <div>
            <img style="max-width: 100%;vertical-align: middle;" src="../img/5ab21dbb68c0066.jpg">
        </div>

    </div>

    <footer></footer>

    <!-- 详情模板 -->
    <script type="text/html" id="detail_template">
         <div class="det_conner">
        <!-- 放大镜 -->
        <div class="det_left">
                <!-- 显示中图 -->
               
               <img src="{{img[0].middle}}" data-zoom-image="{{img[0].large}}" alt="" class="middle-zoom">
                        <!-- 显示小图 -->
            
             <div id="smallBox">
                <ul>
                {{each img curr}}
                 <li>
                            <a href="#" data-image="{{curr.middle}}" data-zoom-image="{{curr.large}}">
                                <img src="{{curr.small}}" alt="">
                            </a>
                            </li>
                 {{/each}}
                   <!--  <li><a href="#"><img src="../img/59ddfae68ad7337.png" alt=""></a></li>
                     <li><a href="#"><img src="../img/59ddfae68ad7337.png" alt=""></a></li>
                      <li><a href="#"><img src="../img/59ddfae68ad7337.png" alt=""></a></li>
                       <li><a href="#"><img src="../img/59ddfae68ad7337.png" alt=""></a></li> -->

                 </ul>
            </div>
         </div>
        <!-- 放大镜 -->
 
       

        <!-- 左列表 -->
        <div class="det_right">
          <div class ="address">
          <p>
            <img src="../img/5ae00f8b59e2087.png" style="width: 14px;height: 16px">
            <span>四川省 成都市 锦江区 </span>
            <span style="margin-left:200px"><a style="color:#ff7373" href="#">修改地址</a></span>
          </p>
          <p class="dh" style="color: #ff7543;font-size: 12px;margin-top:30px">
            <span>现货</span>
            <span>19:00前下单，预计10月17日18:00点前送达</span>
          </p>
         </div>

         <div class="right_list">
            <span class="prod_id">{{id}}</span>
           <h2 class="prod_title">{{title}}</h2>
           <span><sup>$</sup><label  class="prod_price">{{price}}</label></span>
             <p>{{desc}}</p><hr>
                 <h3>1.选择颜色</h3>
            <ul>
              <li><a href="#">深海蓝</li>
                <li><a href="#">黄色</li>
                  <li><a href="#">绿色</li>
                    <li><a href="#">蓝色</li>
               </ul>
             <div class="goum"><a href="/html/cart.html">立即购买</div>
        </div> 
       <!-- 左列表 -->
         </div>

    </div>
    </script>

</body>
</html>
